<!--
 * @Description: color
 * @Author: rendc
 * @Date: 2021-08-06 14:21:36
 * @LastEditors: rendc
 * @LastEditTime: 2021-08-06 16:33:46
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>color</title>
  <style>
    .app {
      /* 颜色关键字 */
      color: yellowgreen;
      border: 1px solid hotpink;
      /* rgb */
      /* background-color: rgb(22, 7, 22); */
    }

    p {
      /* 将可继承的属性改为不继承 */
      color: initial;
      /* 将不继承的属性改为继承 */
      border: inherit;
      /* 跟随默认情况 */
      /* color: unset; */
      /* rgba */
      /* background-color: rgba(190, 98, 190, 0.425); */
      /* 第一个参数 色调 0-360 0 红色 120 绿色 240 蓝色 第二个参数 饱和度 0-100% 0 灰色 100% 全彩 第三个参数 亮度 0-100% 0 黑色（暗） 100%白色 */
      background-color: hsla(120, 100%, 50%, 0.5);
    }
  </style>
</head>

<body>
  <div class="app">
    mydiv
    <p id="myP" class="myPClass">
      我们的祖国是花园。
      <br>
      我们的祖国是花园。
    </p>
  </div>

</body>

</html>